<template>
<view class="login_box">
	<view class="login_header">
		<view class="img-box" style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
			<view class="imgbox" >
				<image class="titileImgae" src="../../../static/images/349icon.png" style="width: 214rpx; height: 138rpx;" ></image>
			</view>
			<view class="wenzi" style="">忘记密码</view>
		</view>
    
	</view>
  <view class="new-login-box">
    <view class="new-myinput">
      <view class="new-myinput-head">
        <image v-if="colorid==0" src="/static/images/组2.png" mode="" style="width: 36rpx; height: 36rpx;"></image>
        <image v-else src="/static/images/count.png" mode="" style="width: 36rpx; height: 36rpx;"></image>
        <text style="font-size: 28rpx; margin-left: 10rpx;">{{colorid==0?'手机号':'项目账号'}}</text>
      </view>
      <view class="new-myinput-but" style="padding-bottom: 10rpx;">
        <uni-easyinput class="myinput-userphone" v-model="userphone" placeholderStyle="font-size: 28rpx;" :placeholder="colorid==0?'请输入您的手机号':'请输入您的项目账号'" type="text"></uni-easyinput>
      </view>
    </view>
    
    <view class="new-myinput" style="margin-top: 44rpx;">
      <view class="new-myinput-head">
        <image src="/static/images/99.png" mode="" style="width: 36rpx; height: 36rpx;"></image>
        <text class="" style="font-size: 28rpx; margin-left: 10rpx;">验证码</text>
      </view>
      <view class="new-myinput-but" style="margin-bottom: 50rpx; padding-left: 10rpx; font-size: 28rpx;">
        <input type="text" v-model="code" placeholder="请输入验证码" style="flex: 1;">
        <view class="my-imput-icon">
          <view class="mycode" @click="getcode">{{buttonText}}</view>
        </view>
      </view>
    </view>
    
    <view class="new-myinput" style="margin-top: 44rpx;">
      <view class="new-myinput-head">
        <image src="/static/images/password.png" mode="" style="width: 36rpx; height: 36rpx;"></image>
        <text style="font-size: 28rpx; margin-left: 10rpx;">密码</text>
      </view>
      <view class="new-myinput-but" style="margin-bottom: 50rpx;">
        <uni-easyinput class="mypassinput" placeholderStyle="font-size: 28rpx;" v-model="password" placeholder="请输入密码" type="password"></uni-easyinput>
      </view>
    </view>
    
    <view class="new-myinput" style="margin-top: 44rpx;">
      <view class="new-myinput-head">
        <image src="/static/images/password.png" mode="" style="width: 36rpx; height: 36rpx;"></image>
        <text style="font-size: 28rpx; margin-left: 10rpx;">确认密码</text>
      </view>
      <view class="new-myinput-but" style="margin-bottom: 50rpx;">
        <uni-easyinput class="mypassinput" placeholderStyle="font-size: 28rpx;" v-model="twopassword" placeholder="请再次输入密码" type="password"></uni-easyinput>
      </view>
    </view>
    
  </view>
  
  <button class="submitSalery" @click="sub">确定</button>
  
</view>
</template>

<script>
	export default {
		data() {
			return {
        isCountingDown: false,
        countdown: 60,
        
				alignmentFormData:{},
        userphone: '',
        password: '',
        code: '',
        twopassword: '',
        isshowpass: true,
        colorid:0,
        queren:false
			}
		},
    computed: {
      buttonText() {
        return this.isCountingDown ? `${this.countdown} 秒` : "获取验证码";
      },
    },
		onLoad() {
      
		},
		onShow() {
			
		},
		methods: {
      getcode() {
        if (this.isCountingDown) {
          uni.showToast({
            title: '请勿频繁发送验证码 ',
            icon: 'none'
          })
          return;
        }

        // 模拟发送请求，这里可以替换成实际的请求
        uni.$get(this.path).then(res => {
          // 在实际应用中，应该发送验证码请求，并在成功回调中开始倒计时
          uni.showToast({
            title: '验证码发送成功',
            icon: 'none'
          })
          
        })
        
        // 这里仅作示例
        setTimeout(() => {
          // 倒计时开始
          this.isCountingDown = true;
          uni.showToast({
            title: '验证码发送成功',
            icon: 'none'
          })
          const timer = setInterval(() => {
            this.countdown -= 1;
            if (this.countdown === 0) {
              clearInterval(timer);
              this.isCountingDown = false;
              this.countdown = 60;
            }
          }, 1000);
        }, 300);
      },
      clearusername(){
        this.userphone = ''
      },
      sub(){
        if(this.code.length == 0){
          uni.showToast({
            title: '请输入验证码',
            icon: 'none'
          })
          return
        }
      
        if(this.userphone.length == 0 || this.password.length == 0 || this.twopassword.length == 0){
          uni.showToast({
            title: '请输入手机号或密码',
            icon: 'none'
          })
          return
        }
        
        if(this.password != this.twopassword){
          uni.showToast({
            title: '两次输入的密码不一致',
            icon: 'none'
          })
          return
        }
        
        uni.showLoading({
          title: '登录中'
        })
        uni.request({
          url: this.path,
          method: 'POST',
          timeout: 5000,
          success: (res) => {
            console.log(res);
            
          },
          fail: (err) => {
            uni.hideLoading()
            uni.showToast({
              title: '网络错误 请稍后重试 !',
              icon: 'none'
            })
            console.log('err', err);
          }
        })
      },
		}
	}
</script>

<style lang="scss" scoped>
  /deep/ .is-input-border:first-child {
      background-color: transparent !important;
  }
  
  .new-myinput-but{
    
  }
  
  /deep/ .is-input-border{
    background-color: #f5f9ff !important;
    flex: 1;
    width: 100% !important;
  }
  /deep/ .new-myinput-but{
    flex: 1 !important;
    width: 100% !important;
  }
  
  .mycode{
    font-weight: 600;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150rpx;
    height: 56rpx;
    border: 1px solid #e2e2e2;
    color: #055DFE;
    font-size: 24rpx;
    box-shadow: 0 10rpx 10rpx 1rpx rgba(5, 93, 254, 0.15);
  }
  
  .new-login-box{
    background: linear-gradient(to bottom, #8bbae5 30px, #f5f9ff, transparent 300rpx);
    border: 1px solid #487DE5;
    border-radius: 10rpx;
    position: fixed;
    top: 440rpx;
    left: 40rpx;
    background-color: #f5f9ff;
    width: 670rpx;
    height: fit-content;
    box-sizing: border-box;
    padding-left: 55rpx;
    padding-top: 54rpx;
    padding-right: 60rpx;
    .new-login-but{
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #6E81A0;
    }
    .new-title{
      font-size: 32rpx;
      .new-title-text{
        &.active{
          color: #055DFE;
        }
      }
    }
    .new-myinput{
      // margin-top: 50rpx;
      .new-myinput-head{
        display: flex;
        align-items: center;
      }
      .new-myinput-but{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 26rpx;
        padding-bottom: 10rpx;
        border-bottom: 1px solid #e2e2e2;
        .my-imput-icon{
          // padding-bottom: 22rpx;
        }
      }
    }
  }
  
  
  .icon-text-title{
    margin-left: 10rpx;
  }
  
  .titileImgae{
    position: fixed;
    top: 137rpx;
    left: 268rpx;
  }
  
	.fontcolor{
	color: #055dfe;	
	}
	.login_header {
		width: 100%;
		height: 520rpx;
		background: url('../../../static/images/mengbanzu.png');
		background-color: #527ee8;
		display: flex;
		justify-content: center;
		align-items: center;
		.img-box{
			width: 268rpx;
			height: 160rpx;
			text-align: center;
			.imgbox{
				width: 268rpx;
				height: 120rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.wenzi{
				position: fixed;
        top: 298rpx;
        left: 343rpx;
        color: white;
        font-size: 32rpx;
			}
		}
	}
	.login-box{
		width: 95%;
		height: fit-content;
		margin: 0 auto;
		font-size: 28rpx;
		.login-info-title{
			width: 95%;
			display: flex;
			align-items: center;
			height: 60rpx;
			color: black;
      margin-top: 40rpx;
      margin-bottom: 50rpx;
			.login-info-title-text{
				width: 140rpx;
				font-size: 32rpx;
			}
			
		}
	}
	.login_info {
		margin-top: -100rpx;
	}
	/deep/.is-input-border{
		border: none !important;
		// border-bottom: 1px #edf3ff solid !important;
		
	}
	.submitSalery {
		width: 670rpx;
		height: 92rpx;
		border-radius: 10rpx;
		line-height: 92rpx;
		position: fixed;
    top: 1350rpx;
    left: 40rpx;
		background-color: #055dfe;
    box-shadow: 3px 0 0 #055dfe;
		color: #fff;
		font-size: 32rpx;
		bottom: 70rpx;
		
	}
	.icon-text{
		display: flex;
		width: 95%;
		height: fit-content;
		align-items: center;
		height: 36rpx;
		font-size: 32rpx;
		color: black;
    padding-bottom: 20rpx;
		.radio{
			display: inline-block;
			transform: scale(0.6);
		}
		.icon-text-img{
			width: 36rpx;
			height: 36rpx;
			image{
				height: 100%;
				width: 100%;
			}
		}
		
	}
	/deep/.uni-card{
		background: linear-gradient(#a2bbf4 5%,#eff4fe 20%,#ffffff 25%,#fff 30%);
	}
</style>